<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码 */
    </style>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js">
    </script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js">
    </script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js">
    </script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>

<div id="container" style="height:100%"></div>

<script>

    Highcharts.setOptions({
        lang: {
            contextButtonTitle: "图表导出菜单",
            decimalPoint: ".",
            downloadJPEG: "下载JPEG图片",
            downloadPDF: "下载PDF文件",
            downloadPNG: "下载PNG文件",
            downloadSVG: "下载SVG文件",
            printChart: "打印图表",
            viewFullscreen: "全屏"
        }
    });

    let getData = () => {
        //names 员工名称数组
        let names = new Set();

        let series = [];

        // k员工名  v 12个月工资数组
        let myMap = new Map();
        $.get({
            async: false,
            cache: false,
            url: "/api/emp/empline", success: (data) => {

                data.forEach(p => {

                    names.add(p.e_truename);

                    if (myMap.has(p.e_truename)) {
                        // 取出工资数组，
                        let m = myMap.get(p.e_truename);
                        let money = p.money;
                        m[p.month - 1] = !!money ? money : 0;
                        myMap.set(p.e_truename, m)
                    } else {
                        // 员工工资数组，初始化为 0
                        const moneys = new Array(12).fill(0);
                        // 一月工资
                        moneys[p.month - 1] = p.money;
                        myMap.set(p.e_truename, moneys)
                    }
                });
            }
        });


        myMap.forEach((value, key, map) => {
            series.push({
                name: key,
                data: value
            })
        });

        names = Array.from(names);
        let obj = {
            names: names,
            series: series
        };

        //  console.log(myMap);
        // console.log('obj', obj);
        return obj;
    };

    var data = getData();

    var chart = Highcharts.chart('container', {
        title: {
            text: '员工个人业绩折线图'
        },
        xAxis: {
            type: 'category',
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            min: 0,
            title: {
                text: '人民币'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        series: data.series,
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
</script>
</body>
</html>